<template>
  <div>
    <div class="userdetailsbox" ref="userview">
      <div class="mtop">
        <div class="imgb">
          <img src="../assets/images/my.jpg" alt="" ref="backimg" />
        </div>
        <div class="btn" @touchstart="$router.push({ path: '/recommend' })">
          <span class="iconfont icon-fanhui-xianxing"></span>
          返回
        </div>
      </div>
      <div class="backg">
        <div class="content">
          <div class="u">
            <img src="../assets/images/my.jpg" alt="" />
            <p>狄仁杰</p>
            <p><span>505关注</span><span>18340粉丝</span><span>Lv8</span></p>
            <p><span>代码什么的，也很擅长</span></p>
            <p><span>终极大招，断掉对面的wifi</span></p>
          </div>
          <div class="sundry"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    gotoplay(...data) {
      let playData = {
        id: data[0],
        name: data[1],
        pic: data[2],
        author: data[3],
      };
      this.$store.commit("curListFn", playData);
      this.$store.commit("playflagFn", true);
    },
    pushlist() {
      let list = [];
      this.love.forEach((item) => {
        list.push({
          id: item.id,
          name: item.name,
          pic: item.pic,
          author: item.author,
        });
      });
      this.$store.commit("allListFn", list);
    },
  },
  filters: {
    authorFn(old, newd) {
      let str = "";
      newd.forEach((item) => {
        str = str + item.name + " / ";
      });
      str = str.substr(0, str.length - 2);
      return str;
    },
  },
  computed: {
    love() {
      return this.$store.state.love;
    },
  },
  mounted() {
    let s = 1;
    let startY = 0;
    this.$refs.userview.addEventListener("touchstart", (e) => {
      e.preventDefault();
      startY = e.touches[0].pageY;
    });
    this.$refs.userview.addEventListener("touchmove", (e) => {
      e.preventDefault();
      if (startY < e.touches[0].pageY) {
        s = s + 0.02;
        this.$refs.backimg.style.transform = `scale(${s})`;
      } else {
        s = s - 0.02;
        if (s > 1) {
          this.$refs.backimg.style.transform = `scale(${s})`;
        }
      }
    });
    this.$refs.userview.addEventListener("touchend", (e) => {
      e.preventDefault();
      if (this.$refs.backimg) {
        this.$refs.backimg.style.transform = `scale(1)`;
        s = 1;
      }
    });
  },
};
</script>
<style lang="less">
.userdetailsbox {
  .mtop {
    height: 40vh;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
    .imgb {
      height: 100%;
      img {
        //   width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin-bottom: 20px;
        max-width: 100%;
        margin: auto;
      }
    }
    .btn {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 4vw;
      color: #fff;
      font-weight: bolder;
    }
  }
  .backg {
    height: 60vh;
    background-color: skyblue;
    background-image: url("../assets/images/back02.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .content {
      height: 100%;
      position: relative;
      background-color: rgba(0, 0, 0, 0.384);
      color: white;
      .u {
        width: 80%;
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        text-align: center;
        margin: 0 auto;
        border-radius: 15px;
        position: relative;
        padding: 50px 0 5px 0;
        top: -16px;
        img {
          height: 70px;
          width: 70px;
          border-radius: 50%;
          border: 2px solid white;
          position: absolute;
          top: -35px;
          left: 50%;
          transform: translateX(-50%);
        }
        p {
          margin: 0;
          font-size: 5vw;
          font-family: "KaiTi";
          &:nth-child(2) {
            font-weight: bolder;
          }
          span {
            font-size: 3vw;
            margin: 0 5px;
          }
        }
      }
    }
  }
}
</style>